<template>
  <div class="app-container">
    <div class="filter-tools">
      <el-form :inline="true" :model="filter" class="filter-form">
        <el-form-item label="状态">
          <el-select
            v-model="filter.enable"
            placeholder="请选择状态"
            clearable
          >
            <el-option v-for="(data,i) in status" :key="i" :label="data" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属产品">
          <el-select
            v-model="filter.product_id"
            placeholder="请选择产品"
            clearable
          >
            <el-option v-for="(data,i) in products" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属项目">
          <el-select
            v-model="filter.project_id"
            placeholder="请选择项目"
            clearable
          >
            <el-option v-for="(data,i) in projects" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="主模块">
          <el-select
            v-model="filter.f_module_id"
            placeholder="请选主模块"
            clearable
          >
            <el-option v-for="(data,i) in SList" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="子模块">
          <el-select
            v-model="filter.s_module_id"
            placeholder="请选子模块"
            clearable
          >
            <el-option v-for="(data,i) in FList" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="开发组">
          <el-select
            v-model="filter.cate_id"
            placeholder="请选择开发组"
            clearable
          >
            <el-option v-for="(data,i) in cates" :key="i" :label="data.name" :value="data.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请求方式">
          <el-select
            v-model="filter.method_type"
            placeholder="请选择状态"
            clearable
          >
            <el-option v-for="(data,i) in method_types" :key="i" :label="data" :value="i"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接口名">
          <el-input
            v-model="filter.name"
            placeholder="接口名"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="标签">
          <el-input
            v-model="filter.tags"
            placeholder="标签"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="说明">
          <el-input
            v-model="filter.remark"
            placeholder="说明"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input
            v-model="filter.created_adminer"
            placeholder="创建人"
            clearable
          ></el-input>
        </el-form-item>

        <el-form-item label="更新人">
          <el-input
            v-model="filter.updated_adminer"
            placeholder="更新人"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="ID">
          <el-input
            v-model="filter.id"
            placeholder="ID"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="getList()">
            筛选
          </el-button>
        </el-form-item>
        <el-button type="primary" icon="el-icon-sugar" plain>
          单接口看结果
        </el-button>
        <el-form-item style="float:right">
          <el-button type="success" icon="el-icon-plus" @click="handleAdd()">
            添加
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <el-table  ref="singleTable" v-loading="dataLoading" :data="dataList" :height="height" border
                 highlight-current-row>
        <el-table-column label="接口ID" width="80">
          <template slot-scope="scope">
            <el-radio @change="handleCurrentChange(scope.row)" :label="scope.row.id" v-model="test_api_id"></el-radio>
          </template>
        </el-table-column>
        <el-table-column label="项目/产品/模块" min-width="150">
          <template slot-scope="scope">
            <div class="goto" @click="goProject(scope.row)"><b>项目名称:</b>{{scope.row.project_name}}</div>
            <div class="goto" @click="goProduct(scope.row)" ><b>产品名称:</b>{{scope.row.product_name}}</div>
            <div class="goto" @click="goCate(scope.row)"><b>项目组:</b>{{scope.row.cate_name}}</div>
            <div  class="goto" @click="goModuleSList(scope.row)"><b>子模块:</b>{{scope.row.s_module_name}}</div>
            <div class="goto" @click="goModuleFList(scope.row)"><b>主模块:</b>{{scope.row.f_module_name}}</div>
          </template>
        </el-table-column>
        <el-table-column label="接口信息"  min-width="200">
          <template slot-scope="scope">
            <div><b>接口名:</b>{{scope.row.name}}</div>
            <div><b>域名:</b>{{scope.row.host_url}}</div>
            <div><b>接口:</b>{{scope.row.api}}</div>
            <div><b>请求方式:</b>{{scope.row.method_type_lable}}</div>
            <div><b>环境标示:</b>{{scope.row.host_env}}</div>
          </template>
        </el-table-column>
        <el-table-column label="请求头"  min-width="250">
          <template slot-scope="scope">
            <json-viewer
              :value="scope.row.headers"
              :expand-depth=5
              copyable
              boxed
              sort></json-viewer>
          </template>
        </el-table-column>
        <el-table-column label="添加用例"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goParam(scope.row)"><b>用例：</b>{{scope.row.param_count}}组</div>
            </br>
            <el-button @click="handleAddParam(scope.row)">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="请求头添加"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goHeader(scope.row)"><b>请求头：</b>{{scope.row.header_count}}个</div>
            </br>
            <el-button @click="handleAddHeader(scope.row)">添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="取样器"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goSampleValues(scope.row)"><b>取样器：</b>{{scope.row.sample_value_count}}组</div>
            </br>
            <el-button class="goto" @click="goParam(scope.row)">请在用例下面添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="验证器"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goValidator(scope.row)"><b>验证器：</b>{{scope.row.validator_count}}个</div>
            </br>
            <el-button class="goto" @click="goParam(scope.row)">请在用例下面添加</el-button>
          </template>
        </el-table-column>
        <el-table-column label="测试历史"  min-width="200">
          <template slot-scope="scope">
            <div class="goto" @click="goTestApi(scope.row)"><b>测试历史：</b>{{scope.row.test_sum || 0}}条</div>
            </br>
            <el-button class="goto" @click="goTestApi(scope.row)">查看测试历史</el-button>
          </template>
        </el-table-column>
        <el-table-column label="标签" min-width="150">
          <template slot-scope="scope">
            <el-tag
              style="margin-bottom:5px"
              v-for="item in scope.row.tags"
              :key="item"
              :type="item"
              effect="dark">
              {{ item }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="remark"
          label="说明"
          align="center"
        />
        <el-table-column
          prop="note"
          label="备注"
          align="center"
        />
        <el-table-column
          prop="sort"
          label="排序"
          align="center"
        />
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <div><el-tag :type="scope.row.enable === 1 ? 'success' : 'info'">{{status[scope.row.enable]}}</el-tag></div>
          </template>
        </el-table-column>
        <el-table-column label="时间/人" min-width="200">
          <template slot-scope="scope">
            <div><b>更新时间:</b>{{scope.row.updated_at}}</div>
            <div><b>更新人:</b>{{scope.row.updated_adminer}}</div>
            <div><b>创建时间:</b>{{scope.row.created_at}}</div>
            <div><b>创建人:</b>{{scope.row.created_adminer}}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="180">
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                icon="el-icon-edit"
                type="primary"
                size="mini"
                @click="handleAddApi(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                v-if="scope.row.enable == 0"
                icon="el-icon-folder-checked"
                type="warning"
                size="mini"
                @click="setCate(scope.row, 1)"
              >
                开启
              </el-button>
              <el-button
                v-if="scope.row.enable == 1"
                icon="el-icon-folder-delete"
                type="danger"
                size="mini"
                @click="setCate(scope.row, 0)"
              >
                关闭
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="filter.page"
        :page-sizes="[10, 20, 30, 50, 100]"
        :page-size="filter.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filter.total"
        @size-change="handleSizeChange"
        @current-change="getList"
      ></el-pagination>
    </div>
    <el-dialog title="编辑添加" :visible.sync="dialogStatus" width="900px">
      <el-form :model="apiData" label-width="80px">
        <el-form-item label="所属:">
          <p><b>开发组:</b>《{{apiData.cate_name}}》-><b>项目:</b>《{{apiData.project_name}}》-><b>产品:</b>《{{apiData.product_name}}》</p>
          <p><b>主模块:</b>《{{apiData.f_module_name}}》-><b>子模块:</b>《{{apiData.s_module_name}}》</p>
        </el-form-item>
        <el-form-item label="接口名称:">
          <el-input v-model="apiData.name" placeholder="接口名称" class="filter-item"/>
        </el-form-item>
        <el-form-item label="接口:">
          <el-input v-model="apiData.api" placeholder="接口(环境标示+路径)" class="filter-item"/>
        </el-form-item>
        <el-form-item label="请求方式:">
          <el-radio v-model="apiData.method_type" label="1">POST</el-radio>
          <el-radio v-model="apiData.method_type" label="2">GET</el-radio>
        </el-form-item>
        <el-form-item label="接口说明:">
          <el-input type="textarea" :rows="2" v-model="apiData.remark" placeholder="接口说明" class="filter-item"/>
        </el-form-item>
        <el-form-item label="接口备注:">
          <el-input type="textarea" :rows="2" v-model="apiData.note" placeholder="接口备注" class="filter-item"/>
        </el-form-item>

        <el-form-item label="标签" >
          <el-tag
            :key="tag"
            v-for="tag in apiData.tags"
            closable
            :disable-transitions="false"
            @close="handleCloseA(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisibleA"
            v-model="inputValueA"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirmA"
            @blur="handleInputConfirmA"
          >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInputA">+新标签</el-button>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogStatus = false">取消</el-button>
        <el-button type="primary" @click="saveApiForm()">提交</el-button>
      </div>
    </el-dialog>
    <el-dialog title="添加请求头" :visible.sync="dialogHeaderStatus" width="900px">
      <el-form :model="headerData" label-width="80px">
        <el-form-item label="所属:">
          <p><b>开发组:</b>《{{headerData.cate_name}}》-><b>项目:</b>《{{headerData.project_name}}》-><b>产品:</b>《{{headerData.product_name}}》</p>
          <p><b>主模块:</b>《{{headerData.f_module_name}}》-><b>子模块:</b>《{{headerData.s_module_name}}》</p>
          <p><b>接口名:</b>《{{headerData.api_name}}》-><b>接口:</b>{{headerData.api}}&ensp;&ensp;&ensp;{{headerData.method_type_lable}}
            &ensp;&ensp;&ensp; <b>域名:</b>{{headerData.api_url}}</p>
        </el-form-item>
        <el-form-item label="header名:">
          <el-input v-model="headerData.key" placeholder="key header名" class="filter-item"/>
        </el-form-item>
        <el-form-item label="header值:">
          <el-input v-model="headerData.value" placeholder="value 支持使用取样结果" class="filter-item"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogHeaderStatus = false">取消</el-button>
        <el-button type="primary" @click="saveHeaderForm()">提交</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加用例" :visible.sync="dialogParamStatus" width="900px">
      <el-form :model="paramData" label-width="80px">
        <el-form-item label="所属:">
          <p><b>开发组:</b>《{{paramData.cate_name}}》-><b>项目:</b>《{{paramData.project_name}}》-><b>产品:</b>《{{paramData.product_name}}》</p>
          <p><b>主模块:</b>《{{paramData.f_module_name}}》-><b>子模块:</b>《{{paramData.s_module_name}}》</p>
          <p><b>接口名:</b>《{{paramData.api_name}}》-><b>接口:</b>{{paramData.api}}&ensp;&ensp;&ensp;{{paramData.method_type_lable}}
            &ensp;&ensp;&ensp; <b>域名:</b>{{paramData.api_url}}</p>
        </el-form-item>
        <el-form-item label="用例:">
          <textarea v-model="paramData.param" v-on:keyup="pJson()" style="width:778px;height:280px;" class="col-lg-4 " id="textSourceJosn"></textarea>
          <json-viewer
            :value="paramData.pJson"
            :expand-depth=5
            copyable
            boxed
            sort></json-viewer>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogParamStatus = false">取消</el-button>
        <el-button type="primary" @click="saveParamForm()">提交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as api from '@/api/module/moduleApi' // API接口
import * as apiApi from '@/api/api/apiApi' // API接口
import * as headerApi from '@/api/api/apiHeaderApi' // API接口
import {enableCate} from '@/api/project/product' // API接口
import * as paramApi from '@/api/api/paramApi' // API接口
import * as sampleValueApi from '@/api/api/sampleValueApi' // API接口

import * as cateApi  from '@/api/project/projectCate' // API接口


import {enableProject}  from '@/api/project/project'

export default {
  name: 'apiList',
  data() {
    return {
      height:this.$baseTableHeight(1),
      status:{
        null:'全部',
        0:'关闭',
        1:'开启'
      },
      method_types:{},
      products:{},
      projects:{},
      cates:{},
      SList:{},
      FList:{},
      filter: {
        id:"",
        method_type:"",
        created_adminer:"",
        updated_adminer:"",
        product_id:"",
        project_id:"",
        cate_id:"",
        page: 1,
        level: 2,
        pageSize: 10,
        total: 0,
        tags:"",
        f_module_id:"",
        s_module_id:"",
        name: '',
        remark:"",
        enable: "null",
      },
      dataLoading: true,
      dataList: [],
      dialogStatus:false,
      formData:{},
      topStatus:0,
      dynamicTags: ['标签一', '标签二', '标签三'],
      inputVisible: false,
      inputVisibleA: false,
      inputValue: '',
      inputValueA: '',
      apiData:{},
      headerData:{},
      paramData:{},
      disabledStatus:false,
      dialogHeaderStatus:false,
      dialogParamStatus:false,
      test_api_id:""
    }
  },
  created() {
    this.filter.id = this.$route.query.api_id || null
    this.filter.s_module_id = this.$route.query.s_module_id || null
    this.filter.f_module_id = this.$route.query.f_module_id || null
    this.getProduct()
    this.getCate()
    this.getProjects()
    this.getSList()
    this.getFList()
    this.getList()
  },
  methods: {
    getList(page = 1) {
      this.filter.page = Number(page)
      apiApi.list(this.filter).then((res) => {
        this.dataList = res.data.list
        this.filter.total = res.data.total
        this.method_types = res.data.method_type_maps
        this.dataLoading = false
      })
    },
    getSList() {
      api.enableModule().then((res) => {
        this.SList = res.data.list
      })
    },
    getFList() {
      api.enableModule({level:2}).then((res) => {
        this.FList = res.data.list
      })
    },
    getCate() {
      cateApi.enableCate(this.filter).then((res) => {
        this.cates = res.data.list
      })
    },
    goApis(data) {
      this.$router.push({path:'/api/apiList',query:{s_module_id:data.s_module_id}});
    },
    goParam(data) {
      this.$router.push({path:'/api/apiParamList',query:{api_id:data.id}});
    },
    goHeader(data) {
      this.$router.push({path:'/api/apiHeaderList',query:{api_id:data.id}});
    },
    goSampleValues(data) {
      this.$router.push({path:'/api/SampleValues',query:{api_id:data.id}});
    },
    handleAddApi(data) {
      this.apiData = {
        id:data.id,
        cate_name:data.cate_name,
        project_name:data.project_name,
        product_name:data.product_name,
        f_module_name:data.f_module_name,
        s_module_name:data.s_module_name,
        s_module_id:data.s_module_id,
        method_type:String(data.method_type),
        name:data.name,
        api:data.api,
        remark:data.remark,
        note:data.note,
        tags:data.tags,
        sort:data.sort,
      },
        this.dialogStatus = true
    },
    pJson() {
      if (typeof this.paramData.param == 'string') {
        try {
          this.paramData.pJson = JSON.parse(this.paramData.param)
          this.paramData.isJson = true
          return true;
        } catch(e) {
          this.paramData.pJson = "请填写正确的json格式用例"
          this.paramData.isJson = false
          return false;
        }
      }
      this.paramData.pJson = "请填写正确的json格式用例"
      this.paramData.isJson = false
    },
    handleAddHeader(data) {
      this.headerData= {
        cate_name:data.cate_name,
        project_name:data.project_name,
        product_name:data.product_name,
        f_module_name:data.f_module_name,
        s_module_name:data.s_module_name,
        s_module_id:data.s_module_id,
        method_type_lable:data.method_type_lable,
        api_name:data.name,
        api:data.api,
        api_id:data.id,
        api_url:data.host_url,
        key:"",
        value:"",
      },
        this.dialogHeaderStatus = true
    },
    handleAddParam(data) {
      this.paramData= {
        cate_name:data.cate_name,
        project_name:data.project_name,
        product_name:data.product_name,
        f_module_name:data.f_module_name,
        s_module_name:data.s_module_name,
        s_module_id:data.s_module_id,
        method_type_lable:data.method_type_lable,
        api_name:data.name,
        api:data.api,
        api_id:data.id,
        api_url:data.host_url,
        param:"",
        pJson:"请填写正确的json格式用例",
        isJson:false
      },
        this.dialogParamStatus = true
    },
    saveApiForm() {
      apiApi.save(this.apiData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogStatus = false
      })
    },
    saveHeaderForm() {
      headerApi.save(this.headerData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogHeaderStatus = false
      })
    },
    saveParamForm() {
      if(!this.paramData.isJson) {
        this.$message.warning(this.paramData.pJson)
        return false
      }
      this.paramData.param = this.paramData.pJson
      paramApi.save(this.paramData).then((res) => {
        this.getList();
        this.paramData.param = "完成"
        this.$message.success(res.userMsg)
        this.dialogParamStatus = false
      })
    },
    getProjects() {
      enableProject(this.filter).then((res) => {
        this.projects = res.data.list
      })
    },
    getProduct() {
      enableCate(this.filter).then((res) => {
        this.products = res.data.list
      })
    },
    handleSizeChange(val) {
      this.filter.pageSize = val
      this.getList(1)
    },
    goProject(data){
      this.$router.push({path:'/project/projectList',query:{project_id:data.project_id}});
    },
    goProduct(data) {
      this.$router.push({path:'/project/productList',query:{product_id:data.product_id}});
    },
    goCate(data) {
      this.$router.push({path:'/project/projectCate',query:{cate_id:data.cate_id}});
    },
    goModuleFList(data) {
      this.$router.push({path:'/module/moduleFList',query:{module_id:data.f_module_id}});
    },
    goModuleSList(data) {
      this.$router.push({path:'/module/moduleSList',query:{s_module_id:data.s_module_id}});
    },
    goValidator(data) {
      this.$router.push({path:'/api/apisValidatorList',query:{api_id:data.id}});
    },
    goTestApi(data) {
      this.$router.push({path:'/runTest/testApis',query:{api_id:data.id}});
    },
    handleAdd(){
      this.formData = {
        note:"",
        enable:1,
        level:2,
        name:'',
        sort:1,
        remark:'',
        tags:[],
        p_id:"",
      },
        this.disabledStatus = false
      this.dialogStatus = true
    },
    handleEdit(data){
      this.formData = {
        id:data.id,
        enable: data.enable,
        name: data.name,
        sort: data.sort,
        tags: data.tags,
        remark: data.remark,
        note: data.note,
        p_id: data.p_id,
        level: 2,
      },
        this.disabledStatus = true
      this.dialogStatus = true
    },
    saveForm(){
      api.save(this.formData).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
        this.dialogStatus = false
      })
    },
    handleClose(tag) {
      this.formData.tags.splice(this.formData.tags.indexOf(tag), 1);
    },
    handleCloseA(tag) {
      this.apiData.tags.splice(this.apiData.tags.indexOf(tag), 1);
    },
    setCate(data,enable){
      apiApi.set({id:data.id,enable:enable}).then((res) => {
        this.getList();
        this.$message.success(res.userMsg)
      })
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.formData.tags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleInputConfirmA() {
      let inputValue = this.inputValueA;
      if (inputValue) {
        this.apiData.tags.push(inputValue);
      }
      this.inputVisibleA = false;
      this.inputValueA = '';
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    showInputA() {
      this.inputVisibleA = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleCurrentChange(data) {
      this.test_api_id = data.id
      console.log(this.test_api_id)
    },
  },

}
</script>

<style>
.avatar-uploader .el-upload{
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>
<style lang="scss" scoped>
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
.goto:hover{color: #0051ff;}
.goto{
  cursor:pointer
}
</style>


